<template>
  <div>
    我是用于props与emit子组件
    <br />
    <h3>{{ num }}</h3>
    <button @click="setNumValue">修改num</button>
    <el-dialog :visible="isShow" @close="$emit('setShow')"></el-dialog>
    <input type="text" :value="value123" @input="inputEvent" />
    <button @click="setValue">修改value</button>
    <h1>.sync</h1>
    <h3>{{ xxxnum }}</h3>
    <button @click="$emit('update:xxxnum', xxxnum + 1)">修改xxxnum</button>
  </div>
</template>
<script>
export default {
  props: {
    num: {
      type: Number,
      default: 0,
      required: true,
      validator: value => {
        return value < 50
      }
    },
    isShow: {
      type: Boolean
    },
    value123: {
      type: String,
      required: true
    },
    xxxnum: {
      type: Number,
      required: true
    }
  },
  model: {
    prop: 'value123',
    event: 'change'
  },
  methods: {
    setNumValue () {
      this.$emit('setNum', this.num + 1)
    },
    setValue () {
      this.$emit('change', '下着有些伤心的雨')
    },
    inputEvent (e) {
      console.log(e.target.value)
      this.$emit('change', e.target.value)
    }
  }
}
</script>
<style></style>
